<template>
  <div class="w-full bg-[#38383842]">
    <div
      class="header w-full h-[80px] bg-no-repeat bg-[length:100%_100%] flex items-center justify-between text-white tracking-[2px] px-[60px]">
      <div class="text-[20px] font-extralight">{{ dateYear }} {{ dateWeek }}</div>
      <div class="w-[30vw] font-YouSheBiaoTiHei text-[42px] leading-[22px] text-center">
        大屏名字
      </div>
      <div class="text-[20px] font-extralight flex items-center gap-[80px] justify-between">
        <div>
          {{ weatherInfo?.province }}
          {{ weatherInfo?.weather }}
          {{ weatherInfo?.temperature }}
          <wi:celsius class="text-[40px] ml-[-20px]" />
        </div>
        <div>
          <ion:arrow-expand
            v-if="!isScreenFull"
            class="cursor-pointer text-[25px]"
            @click="launchFullscreen" />
          <ion:arrow-shrink v-else class="cursor-pointer text-[25px]" @click="launchFullscreen" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { formatTimeScreen } from '@/utils/index.js'
  import { onMounted, ref } from 'vue'
  import { useWeatherStore } from '@/store/weather.js'
  import { storeToRefs } from 'pinia'

  // 获取天气store
  const weatherStore = useWeatherStore()

  const { weatherInfo } = storeToRefs(weatherStore)
  // 获取时间
  const dateYear = ref('')
  const dateWeek = ref('')
  const weekday = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'])

  function updateClock() {
    dateYear.value = formatTimeScreen(new Date(), 'yyyy年MM月dd日')
    dateWeek.value = weekday.value[new Date().getDay()]
    requestAnimationFrame(updateClock)
  }

  //是否全屏
  const isScreenFull = ref(false)

  function launchFullscreen() {
    try {
      if (isScreenFull.value) {
        document.exitFullscreen()
      } else {
        document.documentElement.requestFullscreen()
      }
      isScreenFull.value = !isScreenFull.value
    } catch (error) {
      console.error('Error toggling fullscreen:', error)
    }
  }

  onMounted(() => {
    // 获取时间
    updateClock()

    // 获取天气
    weatherStore.getWeatherInfo({})
  })

  onBeforeUnmount(() => {
    cancelAnimationFrame(updateClock)
  })
</script>

<style lang="scss" scoped>
  .header {
    background-image: url('@/assets/images/header.png');
  }
</style>
